<template>
  <view class="bg-color" :style="{paddingTop:getFillHeight()+'px'}">
    <!-- 使用自定义头部导航条 -->
     <my-navbar  title='分类'></my-navbar>
    <view class="cate-box" :style="isHeightAdaption?{}:{height:screenHeight+'px'}">
      <my-card-cate v-for="(item) in recommendedCateList" :key="item._id" :item='item'></my-card-cate>
    </view>
    <view class="no-more" v-show="!hasMore">
      没有更多数据了
    </view>
    多大啊·
  </view>
</template>

<script setup>
  import {
    computed,
    ref
  } from 'vue';
  import {
    getFillHeight
  } from '@/utlis/system-info.js'
  import {
    onReady,
    onReachBottom,
    onPullDownRefresh
  } from '@dcloudio/uni-app'
  import {
    showMsg
  } from '../../utlis/interact';
  import http from '@/api/index.js'
  //数据
  const hasMore = ref(true);
  // 推荐分类
  const recommendedCateList = ref([]);
  // 全局变量
  let screenHeight;
  let pageNum = 1;
  //总页数
  let total = 0;
  let isHeightAdaption = false;
  //节流阀
  let isLoading = false;
  // 组件实例
  //计算属性
  //网络请求
  async function getRecommendCateList(cb) {
    isLoading = true;
    const res = await http('api/bizhi/classify', {
      pageNum
    });
    //不管200还是非200都关闭节流阀
    isLoading = false;
    cb && cb();
    if (res.errCode !== 0) return showMsg();

    recommendedCateList.value = [...recommendedCateList.value, ...res.data];
    total = res.total;
  }
  //事件回调
  // 触底加载更多
  onReachBottom(() => {
    isHeightAdaption = true;
    // 判断数据是否加载完毕
    if (pageNum * 9 >= total) return hasMore.value = false;

    //判断是否正在发请求
    if (isLoading) return showMsg('请勿频繁下拉');
    pageNum++;
    getRecommendCateList();
  })

  // 上拉刷新
  onPullDownRefresh(() => {
    // 重置关键数据
    recommendedCateList.value = [];
    isLoading = false;
    total = 0;
    pageNum = 1;
    hasMore.value = true;
    isHeightAdaption=false;
    // 发网络请求,请求成功后要关闭下拉刷新
    getRecommendCateList(() => uni.stopPullDownRefresh())
  })
  //生命周期
  onReady(() => {
    getRecommendCateList();
    screenHeight = uni.getWindowInfo().screenHeight;
  });
</script>

<style lang="scss" scoped>
  .cate-box {
    width: 750rpx;
    padding: 30rpx;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min-content;
    gap: 17rpx;
  }

  .no-more {
    font-size: 30rpx;
    color: $text-color-second;
    text-align: center;
    padding-bottom: 20rpx;
  }
</style>